<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<template id="boxTemplate">
			<div class="sampleBox">
				<div class="label topLeft"></div>
				<div class="label topRight"></div>
				<div class="label bottomLeft"></div>
				<div class="label bottomRight"></div>
			</div>
		</template>
		<style>
			.contents {
				position: absolute;
				width: 700px;
				height: 1725px;
			}

			.wrapper {
				position: relative;
				top: 600px;
			}

			.sampleBox {
				position: relative;
				left: 175px;
				width: 150px;
				background-color: rgb(245, 170, 140);
				border: 2px solid rgb(201, 126, 17);
				padding: 4px;
				margin-bottom: 6px;
			}

			#box1 {
				height: 200px;
			}

			#box2 {
				height: 75px;
			}

			#box3 {
				height: 150px;
			}

			#box4 {
				height: 100px;
			}

			.label {
				font: 14px 'Open Sans', 'Arial', sans-serif;
				position: absolute;
				margin: 0;
				background-color: rgba(255, 255, 255, 0.7);
				border: 1px solid rgba(0, 0, 0, 0.7);
				width: 3em;
				height: 18px;
				padding: 2px;
				text-align: center;
			}

			.topLeft {
				left: 2px;
				top: 2px;
			}

			.topRight {
				right: 2px;
				top: 2px;
			}

			.bottomLeft {
				bottom: 2px;
				left: 2px;
			}

			.bottomRight {
				bottom: 2px;
				right: 2px;
			}
		</style>
	</head>
	<body>
		<main>
			<div class="contents">
				<div class="wrapper"></div>
			</div>
		</main>
	</body>
	<script>
		let observers = []

		startup = () => {
			let wrapper = document.querySelector('.wrapper')

			// 观察器选项

			let observerOptions = {
				root: null,
				rootMargin: '0px',
				threshold: [],
			}

			// 每个方框的阈值集数组。第一个方框的阈值是通过编程设置的，因为有很多个（每个百分点）。

			let thresholdSets = [
				[],
				[0.5],
				[0.0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0],
				[0, 0.25, 0.5, 0.75, 1.0],
			]

			for (let i = 0; i <= 1.0; i += 0.01) {
				thresholdSets[0].push(i)
			}

			// 添加每个盒子，为每个盒子创建一个新的观察器
			const t = document.querySelector('#boxTemplate').content
			console.log(t)
			for (let i = 0; i < 4; i++) {
				let template = t.cloneNode(true)
				let boxID = `box${i + 1}`
				template.querySelector('.sampleBox').id = boxID
				wrapper.appendChild(document.importNode(template, true))

				// 为该盒子设置观察器

				observerOptions.threshold = thresholdSets[i]
				observers[i] = new IntersectionObserver(
					intersectionCallback,
					observerOptions
				)
				observers[i].observe(document.querySelector(`#${boxID}`))
			}

			// 滚动至开始位置

			document.scrollingElement.scrollTop =
				wrapper.firstElementChild.getBoundingClientRect().top +
				window.scrollY
			document.scrollingElement.scrollLeft = 750
		}

		intersectionCallback = (entries) => {
			entries.forEach((entry) => {
				let box = entry.target
				let visiblePct = `${Math.floor(entry.intersectionRatio * 100)}%`

				box.querySelector('.topLeft').innerHTML = visiblePct
				box.querySelector('.topRight').innerHTML = visiblePct
				box.querySelector('.bottomLeft').innerHTML = visiblePct
				box.querySelector('.bottomRight').innerHTML = visiblePct
			})
		}
    startup();
	</script>
</html>
